<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" errorPage="error.jsp" %>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home | Alvaro´shop</title>
        <link href="shopStyles.css" rel="stylesheet" type="text/css"> <!-- guardamos el css en la raiz porque sino hay cosas que no funcionan -->
        <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <script type="text/javascript" src="js/country.js"></script>

        <script type="text/javascript">
            function comprobarTexto(texto)
            {
                if(texto != "")
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            
            function comprobarEmail(email)
            {
                var patron = new RegExp("^\\w+@\\w+\\.\\w{2,3}$");
                if(email != ""){
                    return (patron.test(email));
                }
                else{
                    return false;
                }
            }
    
            function comprobarPass(pass, pass2)
            {
                if(pass != "" && pass2!=""){
                    return (pass == pass2);
					
                }
                else{
                    return false;
                }
            
        
            }
    
    
    
            function validarRegistro(){
                with(document.signup){
                    //Comprobar datos
                    if(!comprobarTexto(name.value)){
                        alert("Name is empty");
                        name.focus();
                    }
                    else if(!comprobarTexto(secondname.value)){
                        alert("Lastname is empty");
                        name.focus();
                    }
                    
                    else if(!comprobarPass(pass.value, pass2.value)){
                        alert("Passwords are diferent, try again plz!");
                        pass.value="";
                        pass2.value="";
                        pass.focus();
                    }
                    else if(!comprobarEmail(email.value)){
                        alert("WRONG Email!");
                        email.select();
                        email.focus();
                
                    }
                    else if(!comprobarTexto(country.value)){
                        alert("Country is empty");
                        name.focus();
                    }
                    else if(!comprobarTexto(city.value)){
                        alert("City is empty");
                        name.focus();
                    }
                    else if(!comprobarTexto(street.value)){
                        alert("Street is empty");
                        name.focus();
                    }
                    else if(!comprobarTexto(number.value)){
                        alert("Number is empty");
                        name.focus();
                    }
                    else{
                        submit();
                    }
                    
                }
            }
            
        
        </script>
        <!-- Coloca esta petición de presentación donde creas oportuno. -->
        <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>

        <script>
            function about()
            {
                alert("Aplicacion realizada por:\nAlvaro Garcia Ojea\n5º Ingenieria informatica.\n\nEmail: alvarogarcia9@gmail.com");
            }
        </script>

        <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
        <script language="javascript" type="text/javascript" src="js/script.js"></script>



        <style>

            ul.lof-main-wapper li {
                position:relative;	
            }
        </style>

    </head>

    <body>




        <div id="fb-root"></div>
        <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <div class="container">
            <div class="header">

                <table width="100%" border="0">
                    <tr>
                        <td><img src="images/logoshop2.png" width="410" height="165" alt="shop"></td>
                        <td align="right"><img src="images/flag copia.png" width="149" height="123" alt="yourf1store">
                            <!-- Boton me gusta de facebook -->
                            <div class="fb-like" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true"></div>

                            <!-- SiteSearch Google -->
                            <FORM method="get" action="http://www.google.com/search">
                                <input type=hidden name=ie value=UTF-8>
                                <input type=hidden name=oe value=UTF-8>
                                <TABLE bgcolor="#F27405" class="borderSearchRightDown"><tr>
                                        <td class="borderSearchRightDown">
                                            <INPUT TYPE="search" name="q" size="31" maxlength="255" value="" placeholder="Search something you want...">
                                            <INPUT type="submit" name="btnG" VALUE="Buscar en sitio">
                                            <font size=-1>
                                            <input type="hidden" name="domains" value="index.jsp"><br><input type="radio" name="sitesearch" value=""> 
                                            <span class="fontSpecial">WWW</span>
                                            <input type="radio" name="sitesearch" value="index.jsp" checked>
                                            <span class="fontSpecial">F1 store</span><br>
                                            </font>

                                        </td></tr></TABLE>
                                <div align="right"><img src="images/eng.gif" width="20" height="15" alt="eng">   <img src="images/esp.gif" width="20" height="15" alt="esp"> <img src="images/fra.gif" width="20" height="15" alt="fra"> <img src="images/ger.gif" width="20" height="15"> <img src="images/por.gif" width="20" height="15" alt="por"> 
                                    <a href="#final" class="fontSpecialLanguageChooser"><font size="1" face="Verdana">Choose language</font></a></div>
                            </FORM>
                    </tr>
                </table>

            </div>
        </div>

        <div class="container">
            <div class="header">
                <ul class="menu">    
                    <li><a href="index.jsp"><span>Home</span></a></li>
                    <li><a href="login.jsp"><span>Login</span></a></li>
                    <li><a href="signup.jsp" class="active"><span>Signup</span></a></li>
                    <li onClick="about()"><a href="#"><span>About</span></a></li>
                    <li><a href="contact.jsp"><span>Contact</span></a></li>
                    <li><a href="cars.jsp"><span>Cars</span></a></li>
                    <li><a href="/Apparel"><span>Apparel</span></a></li>
                    <li><a href="gadgets.jsp"><span>Gadgets</span></a></li>
                    <li><a href="/CarAccessories"><span>Car Accesories</span></a></li>
                    <li><a href="search.jsp"><span>Search</span></a></li>
                    <li><a href="Scart.jsp"><span>Cart</span></a></li>

                </ul>

            </div>
        </div>

        <div class="container">
            <div class="content">







            </div>
            <table width="100%" height="226" border="0">
                <tr>
                    <td width="14%" align="center" valign="top" class="fontSpecial"><div align="left">
                            <p>&nbsp;</p>
                            <p>Categories  | <a href="allproducts.jsp">All products</a></p>
                            <ul id="MenuBar1" class="MenuBarVertical">
                                <li><a class="MenuBarItemSubmenu" href="cars.jsp">Cars</a>
                                    <ul>
                                        <li><a href="ferrari.jsp">Ferrari</a></li>
                                        <li><a href="redbull.jsp">Red Bull Racing</a></li>
                                        <li><a href="mcclaren.jsp">McClaren-Mercedes</a></li>
                                        <li><a href="mercedes.jsp">Mercedes</a></li>
                                        <li><a href="williams.jsp">Williams-Cosworth</a></li>
                                        <li><a href="tororosso.jsp">Toro Rosso</a></li>
                                        <li><a href="renault.jsp">Renault</a></li>
                                        <li><a href="forceindia.jsp">Force India-Mercedes</a></li>
                                        <li><a href="sauber.jsp">Sauber</a></li>
                                        <li><a href="lotus.jsp">Lotus-Renault</a></li>
                                        <li><a href="hispania.jsp">Hispania RT</a></li>
                                        <li><a href="virgin.jsp">Virgin</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" class="MenuBarItemSubmenu">Apparel</a>
                                    <ul>
                                        <li><a href="shirts.jsp">Shirts</a></li>
                                        <li><a href="jackets.jsp">Jackets</a></li>
                                        <li><a href="pants.jsp">Pants</a></li>
                                        <li><a href="underware.jsp">Underware</a></li>
                                        <li><a href="sneakers.jsp">Sneakers</a></li>
                                    </ul>
                                </li>
                                <li><a href="gadgets.jsp">Gadgets</a>	          </li>
                                <li><a href="#" class="MenuBarItemSubmenu">Car accessories</a>
                                    <ul>
                                        <li><a href="lights.jsp">Lights</a></li>
                                        <li><a href="tyres.jsp">Tyres</a></li>
                                        <li><a href="wheel.jsp">Steering wheel</a></li>
                                        <li><a href="others.jsp">Other pieces</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <p><img src="images/makemonet.png" width="108" height="212" alt="money">

                            <!-- Beginning of meebo me widget code.
                        Want to talk with visitors on your page?  
                        Go to http://www.meebome.com/ and get your widget! -->
                            <embed src="http://widget.meebo.com/mm.swf?BRqynkBnZM" type="application/x-shockwave-flash" width="150" height="300"></embed>
                        </p>
                        <p>&nbsp;</p>
                        <p>&nbsp; </p>
                        <p>&nbsp; </p>
                        <p>&nbsp; </p></td>
                    <td width="86%" align="right" valign="top" class="borderImagesRight"><form name="signup" method="post" action="/ShopOnline/signup_process1">
                            <div align="center">
                                <p>&nbsp;</p>
                                <h2>Sign up process</h2>
                                <table width="50%" border="0">
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Name</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="name" id="name" placeholder="Your real name" autofocus required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">
                                                </span>                  <span class="fontSpecial">
                                                    <label for="secondname">
                                                </span><span class="fontSpecial">Last name</span>                  <span class="fontSpecial">
                                                    </label>
                                                </span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="secondname" id="secondname" placeholder="Your real second name" required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Email</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="email" name="email" id="email" placeholder="Your real Email" required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><label for="pass2">
                                                <div align="left">Pass
                                            </label>
                                            </div></td>
                                        <td><input type="password" name="pass" id="pass" placeholder="Secure pass" required></td>
                                    </tr>
                                    <tr>
                                        <td><label for="pass2">
                                                <div align="left">Pass (Yes..again)
                                            </label>
                                            </div></td>
                                        <td><input type="password" name="pass2" id="pass2" placeholder="Again plz" required></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">
                                                </span>                  <span class="fontSpecial">
                                                    <label for="country2">
                                                </span><span class="fontSpecial">Country</span>                  <span class="fontSpecial">
                                                    </label>
                                                </span></div></td>
                                        <td><span class="fontSpecial">
                                                <select onchange="set_country(this,country,city_state)" size="1" name="region">
                                                    <option value="" selected="selected">SELECT REGION</option>
                                                    <option value=""></option>
                                                    <script type="text/javascript">
                                                    setRegions(this);
                                                    </script>
                                                </select>
                                                <select name="country" size="1" disabled="disabled" onchange="set_city_state(this,city_state)"></select>
                                                <select name="city_state" size="1" disabled="disabled" onchange="print_city_state(country,this)"></select>

                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">City</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="city" id="city" placeholder="Your city" required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Zip code</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="zip" id="zip" placeholder="Your zip code" required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Street</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="street" id="street" placeholder="Your street" required>
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Number</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="number" id="number" placeholder="Your building number">
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">
                                                </span>                  <span class="fontSpecial">
                                                    <label for="floor2">
                                                </span><span class="fontSpecial">Floor</span>                  <span class="fontSpecial">
                                                    </label>
                                                </span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="floor" id="floor" placeholder="Your floor">
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial">Letter</span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="letter" id="letter" placeholder="Any Letter?">
                                            </span></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td><div align="left"><span class="fontSpecial"><% double x = Math.random() * 10000000;
                                            int y = (int) x / 1000;%><%=y%></span></div></td>
                                        <td><span class="fontSpecial">
                                                <input type="text" name="captch" id="captcha" placeholder="Repeat numbers">
                                            </span></td>
                                    </tr>
                                </table>
                                <p>
                                <hr width="60%">
                                <input type="button" name="validad" id="validar" value="Send" onclick="validarRegistro()">
                                </p>
                            </div>
                        </form>
                        <h3><p align="center">&nbsp;</p>

                            <p align="center">&nbsp;</p>
                        </h3>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p></td>
                </tr>
            </table>
        </div>
    </div>



    <div class="container">
        <div class="footer">
            <h5 align="center" class="white">Alvaro F1 online shop - Your F1 store</h5>
            <a name="final"></a><!-- Marcador para ir al final de la pagina -->
            <div id="google_translate_element" align="center"></div>
            <div align="center">
                <script>
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement({
                        pageLanguage: 'es'
                    }, 'google_translate_element');
                }
                </script>
                <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                <img src="images/footerShop.png" width="940" height="74" alt="footer"></div>
        </div>
    </div>

    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
</body>
</html>